import React from 'react';
import ReactDOM from 'react-dom';
import echarts from 'echarts';

export default React.createClass({
    drawColumn() {
        var column1 = echarts.init(document.getElementById('column1'));

        app.title = '柱状图';

        option = {
            title: {
                text: '房屋空置天数',
                textAlign: 'left',
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : ['4月', '5月', '6月',],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type: 'value',
                    min: 0,
                    max: 20,
                    interval: 10,
                    axisLabel: {
                        formatter: '{value} 天'
                    }
                },
            ],
            series : [
                {
                    name:'空置天数',
                    type:'bar',
                    barWidth: '30%',
                    data:[10, 12, 15, ]
                }
            ]
        }

        column1.setOption(option);
    },
    componentDidMount() {
        this.drawColumn();
    },
    render () {
        return (
            <div  >
                <div id="column1" className="column1"></div>
            </div>
        );
    }
});

